<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>私房菜</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
		<style>
        * {
            box-sizing: border-box;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;  /* 1. 需要将页面的高度设置成浏览器可视区域的高度 */
        }
        #container {
            min-height: 100%; /* 2. 需要将容器的高度设置成100% */
            position: relative; /* 3. 容器的position设置为relative，给子元素定位提供基点 */
        }
        footer {
            color: #FFF;
            padding: 20px;
        }
        
        footer {
            position: absolute;
            bottom: 0; /* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 */
            width: 100%;
            background-color: #457B9D;
        }
		</style>
    </head>
	
    <body background="./1234.jpg" 
	style="background-repeat:no-repeat;
	background-attachment:fixed; 
	background-size:100% 100%; ">
        <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
            <a class="navbar-brand font-weight-bold" href="#">严瑞杰私房菜</a>
        </nav>
		
		
        <!--components-->
        <section class="my-5 pt-5">
		
            <div class="container">
               

                <!-- Tables  -->
                <div class="row mb-5" id="tables">
                    <div class="col-sm-12">
                        <h1>菜品</h1>

                        <div class="mt-3 mb-5">
                           
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>菜名</th>
                                        <th>描述</th>
                                        <th>单价</th>
										<th>操作</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
										<th>正方形</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>红烧肉</td>
                                        <td>非常好吃</td>
                                        <td>28</td>
										 <td>修改</td>
                                    </tr>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        
		<div id="container">       
			<footer>
				<p class="pt-2 text-muted">欢迎光临 &copy;私房菜</p>
			</footer>
		</div>
		
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>
    </body>
	
</html>
